<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/aaa/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/aaa/layuiadmin/style/admin.css" media="all">

</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <button id="role-addbtn" class="layui-btn layuiadmin-btn-admin">
                        添加角色
                    </button>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">角色名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="rolename" id="telephone" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button id="role-searchbtn" class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="rolesearch-filter">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                </div>
            </div>
        </div>
        <div class="layui-card-body">
            <table class="layui-hide" id="role" lay-filter="role-filter"></table>

            <script src="/aaa/layuiadmin/layui/layui.js"></script>
            <script src="/aaa/layuiadmin/layui/layui-xtree.js"></script>

            <script type="text/html" id="role-state">
                {{#  if(d.rolestate == 0){ }}
                <button class="layui-btn layui-btn-xs" lay-event="role-stateq">启用中</button>
                {{#  } else { }}
                <button class="layui-btn layui-btn-primary layui-btn-xs" lay-event="role-statej">已禁用</button>
                {{#  } }}
            </script>
            <!--{{#  if(d.roleid != 1){ }}-->
            <script type="text/html" id="role-bar">

                <!--<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="role-detail">查看</a>-->
                <a class="layui-btn layui-btn-xs" lay-event="role-edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="role-del">删除</a>

            </script>
            <!--{{#  } else { }}
                <button class="layui-btn layui-btn-xs" >超级管理员</button>
                {{#  } }}-->
        </div>
    </div>
</div>


<form class="layui-form" id="addroleform">
    <div id="role-addlayer" style="display: none;width: 360px">
        <div class="layui-form-item">
            <label class="layui-form-label">角色名称</label>
            <div class="layui-input-inline">
                <input type="text" name="name" required  lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色描述</label>
            <div class="layui-input-inline">
                <input type="text" name="desc" required  lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">创建时间：</label>
            <div class="layui-input-inline">
                <input type="text" id="createtime" name="createtime"  required  placeholder="yyyy-MM-dd" class="layui-input">
            </div>

        </div>
        <div class="layui-form-item">
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="addrole-save">保存</button>
                </div>
            </div>
        </div>
    </div>
</form>


<div id="role-layer" style="display: none;height: 500px" >
    <input id="role-id" required  lay-verify="required" type="hidden" autocomplete="off" class="layui-input">
        <div class="layui-form-item">
            <label class="layui-form-label">角色名称</label>
            <div class="layui-input-inline">
                <input type="text" id="role-name"  required  lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色详情</label>
            <div class="layui-input-inline">
                <input type="text" id="role-desc" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <form class="layui-form" >
                <div id="xtree" class="xtree_contianer"></div>
            </form>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input type="button" value="保存" class="layui-btn" id="role-per-save"/>
                </div>
            </div>
        </div>
</div>

<script th:inline="none">
    layui.use(['table','form','laydate'], function(){
        var table = layui.table;
        var $ = layui.$;
        var form = layui.form;
        var laydate = layui.laydate;
        var rolextree;

        laydate.render({
            elem:'#createtime',
            type:'datetime'
        });
        $("#role-addbtn").click(function () {
            layer.open({
                type: 1,
                title:'员工权限',
                area: ['400px', '300px'],
                content: $('#role-addlayer')
            });
            document.getElementById("addroleform").reset();
        })
        table.render({
            elem: '#role',
            height:600,
            url: '/aaa/role/getRole',
            page: true,
            cols: [
                [
                    {field:'roleid',title:'角色id',align:'center'},
                    {field:'rolename',title:'角色名称',align:'center'},
                    {field:'roledesc',title:'角色详情',align:'center'},
                    {field:'createtime',title:'创建时间',align:'center'},
                    {field:'rolestate',title:'角色状态',toolbar:'#role-state',align:'center'},
                    {title:'操作',toolbar:'#role-bar',align:'center'},
                ]
            ]
        });
        form.on('submit(rolesearch-filter)', function (data) {
            var field = data.field;
            //执行重载
            table.reload('role', {
                where: field
            });
        });

        form.on('submit(addrole-save)',function (data) {
            var field = data.field;
            $.ajax({
                url:'/aaa/role/addRole',
                type:'POST',
                data:field,
                success:function (data) {
                    if(data.code==100){
                        layer.closeAll();
                        table.reload('role');
                        layer.msg("添加成功");
                    }else if(data.code==300){
                        layer.msg("该角色已存在,请换一个角色名称");
                    }else{
                        layer.closeAll();
                        table.reload('role');
                        layer.msg("添加失败");
                    }

                }
            });
            return false;
        });



        table.on('tool(role-filter)', function(obj){
            var data = obj.data;
            if(obj.event === 'role-stateq'||obj.event === 'role-statej'){


                    $.post({
                        url:'/aaa/role/updateRoleState',
                        data:{
                            id:data.roleid,
                            roleState:data.rolestate
                        },
                    },function (data) {
                        if(data.code==100){
                            layer.closeAll();
                            table.reload('role');
                            layer.msg("修改成功");
                        }else {
                            layer.closeAll();
                            table.reload('role');
                            layer.msg("修改失败");
                        }
                    })

            }else if(obj.event === 'role-detail'){


            } else if(obj.event === 'role-del'){
                layer.confirm('确定删除该行数据？', function(index){
                    $.post({
                        url:'/aaa/role/deleteRole',
                        data:{
                            id:data.roleid
                        },
                    },function (data) {
                        if(data.code==100){
                            layer.msg("删除成功");
                        }else {
                            layer.msg("删除失败,某员工可能拥有该角色");
                        }
                    })
                    layer.close(index);
                });
            } else if(obj.event === 'role-edit'){
                $("#role-name").val(data.rolename);
                $("#role-desc").val(data.roledesc);
                $("#role-id").val(data.roleid);
                $.post({
                    url:'/aaa/role/getRolePer',
                    data:{
                        id:data.roleid
                    },
                },function (data) {

                    rolextree = new layuiXtree({
                        elem: 'xtree'   //(必填) 放置xtree的容器，样式参照 .xtree_contianer
                        , form: form     //(必填) layui 的 from
                        , data: data     //(必填) json数据
                        , isopen: true  //加载完毕后的展开状态，默认值：true
                        , ckall: true    //启用全选功能，默认值：false
                        , ckallback: function () { } //全选框状态改变后执行的回调函数
                        , icon: {        //三种图标样式，更改几个都可以，用的是layui的图标
                            open: "&#xe625;"       //节点打开的图标
                            , close: "&#xe623;"    //节点关闭的图标
                            , end: "&#xe643;"      //末尾节点的图标
                        }
                        , color: {       //三种图标颜色，独立配色，更改几个都可以
                            open: "#EE9A00"        //节点图标打开的颜色
                            , close: "#EEC591"     //节点图标关闭的颜色
                            , end: "#828282"       //末级节点图标的颜色
                        }
                        , click: function (data) {
                            //节点选中状态改变事件监听，全选框有自己的监听事件
                            //console.log(data.elem); //得到checkbox原始DOM对象
                            //console.log(data.elem.checked); //开关是否开启，true或者false
                            //console.log(data.value); //开关value值，也可以通过data.elem.value得到
                            //console.log(data.othis); //得到美化后的DOM对象
                        }
                    });
                })

                layer.open({
                    type: 1,
                    title:'角色权限',
                    content: $('#role-layer')
                });
            }
        });
        $('#role-per-save').click(function () {

            var roleocks = rolextree.GetChecked(); //这是方法
            var array = new Array();
            for (var i = 0; i < roleocks.length; i++) {
                array[i]=roleocks[i].value;
            }
            $.post({
                url:'/aaa/role/updatePer',
                traditional : true,
                data:{
                    array:array,
                    id:$("#role-id").val(),
                    name:$("#role-name").val(),
                    desc:$("#role-desc").val()
                },
            },function (data) {
                if(data.code==100){
                    layer.closeAll();
                    layer.msg("保存成功");
                }else {
                    layer.closeAll();
                    layer.msg("保存失败");
                }
            })
        })
    });
</script>
</body>
</html>